<template>
  <div class="jiesuan">
    <div class="nav-top">
      <NavTopReturn title="结算"></NavTopReturn>
    </div>
    <div class="daifukuai">
      <div class="di-img">
        <img
          class="auto-img"
          src="https://p3.qhimg.com/t011b0bd4dfd3f5b40e.png"
          alt=""
        />
      </div>
      <div class="dai-name">待付款</div>
    </div>
    <div class="Time-name">
      请尽快完成支付，超过 <span class="spans">30分钟</span> 订单将取消
    </div>

    <div class="order">
      <div class="order-order">订单编号：{{ orderNumber }}</div>
      <div class="price">
        金额：<span class="spanss">&yen;{{ totalPrice }}.00</span>
      </div>
    </div>

    <!-- 支付 -->
    <div class="zhifu">
      <div class="zhifubao">
        <div class="itme-img">
          <img
            class="auto-img"
            src="https://img0.baidu.com/it/u=88184341,3154875357&fm=253&fmt=auto&app=120&f=JPEG?w=179&h=180"
            alt=""
          />
        </div>
        <div class="item-content">
          <div class="name">支付宝</div>
          <div class="checkbox">
            <van-checkbox v-model="zchecked" @click="z"></van-checkbox>
          </div>
        </div>
      </div>
      <div class="zhifubao">
        <div class="itme-img">
          <img
            class="auto-img"
            src="https://img1.baidu.com/it/u=717881751,3111860564&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            alt=""
          />
        </div>
        <div class="item-content">
          <div class="name">微信支付</div>
          <div class="checkbox">
            <van-checkbox v-model="wchecked" @click="w"></van-checkbox>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <van-submit-bar
        :price="aa"
        button-text="去支付"
        @submit="onSubmit"
      />
    </div>
  </div>
</template>

<script>
import NavTopReturn from "../components/NavTopReturn.vue";
export default {
  name: "JieSuan",
  components: {
    NavTopReturn,
  },
  data() {
    return {
      //订单数据
      totalData: "",
      //订单号
      orderNumber: "",
      //总金额
      totalPrice: 0,
      aa :0,
      //复选框
      zchecked: true,
      wchecked: false,
    };
  },

  created() {
    this.$emit("clickJieSuanData");
    console.log("传过来的数据==>",this.$route.params);
    this.totalData = this.$route.params.orderData;
    this.orderID = this.$route.params.orderID;
    this.orderData();
  },
  methods: {
    //成功提示
    onSubmit() {
      this.$toast.success("成功支付");
      //拿去购物车本地数据
      // let bendiData = JSON.parse(localStorage.getItem("appCount"));
      //拿到待支付数组
      let currentSuccessData = JSON.parse(localStorage.getItem("successData"));


      //遍历数组,然后更改状态
      currentSuccessData.forEach(item=>{
        console.log("item==>",item);
        if(item.currentTiem == this.orderID){
          item.type = 2
        }
      })

      window.localStorage.setItem("successData", JSON.stringify(currentSuccessData));

      

      // console.log("successData 下面>", successData);

      //跳转到订单页面

      this.$toast.loading({
          message: "加载中...",
          forbidClick: true,
          loadingType: "spinner",
        });
        setTimeout(() => {
          this.$toast.success('支付成功');
        }, 1000);
        setTimeout(() => {
          this.$router.push({name:"ToBePaid"})
        }, 2000);

      //存储本地成功支付得到本地
      // window.localStorage.setItem("successData", JSON.stringify(successData));

      //储存新的数据到本地
      // window.localStorage.setItem("appCount", JSON.stringify(bendiData));
    },
    w() {
      this.zchecked = !this.zchecked;
    },
    z() {
      this.wchecked = !this.wchecked;
    },
    //订单数据
    orderData() {
      //总金额
      console.log("this.totalData=>",this.totalData);
      if (this.totalData == undefined) {
        console.log("结算数据为空");
      } else {
        let totalPrice = 0;
        this.totalData.forEach((item) => {
          totalPrice += Number(item.currentPrice * item.iscount);
        });
        this.orderNumber = this.totalData[0].Time;
        this.totalPrice = totalPrice ;
        this.aa = totalPrice * 100
        console.log("totalPrice", this.orderNumber);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.zhifu {
  width: 96%;
  border-radius: 10px;
  height: 50px;
  padding: 10px;
  margin: 10px auto;
  .item-content {
    font-size: 18px;
    margin-left: 20px;
    line-height: 50px;
    width: 270px;
    .checkbox {
      margin-left: auto;
      margin-top: 15px;
    }
  }
  .zhifubao {
    display: flex;
    background-color: white;
    padding: 10px;
    margin-bottom: 5px;

    .itme-img {
      width: 50px;
      height: 50px;
      border-radius: 10px;
      overflow: hidden;
    }
    .item-content {
      display: flex;
    }
  }
}
.spanss {
  color: red;
  font-weight: bold;
}
.order {
  width: 96%;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  background-color: white;
  border-radius: 10px;
  font-size: 18px;
  .order-order {
    margin-bottom: 5px;
  }
}
.Time-name {
  width: 90%;
  margin: 20px auto;
  font-size: 18px;
  .spans {
    color: red;
    font-weight: bold;
  }
}
.daifukuai {
  width: 150px;
  margin: 0 auto;
  height: 40px;
  display: flex;
  .dai-name {
    margin-left: 10px;
    font-size: 25px;
    font-weight: bold;
    line-height: 40px;
  }
  .auto-img {
    width: 40px;
    height: 40px;
  }
}
.nav-top {
  margin-bottom: 50px;
}
.jiesuan {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #f6f6f7;
}
</style>